<template lang="html">
  <footer class="footer">
    <router-link :to="{name:'首页'}" class="footer-index">
      <i class="icon-index"></i>
    </router-link>
    <span v-if="!isPay" class="footer-addcar" @click="buy">
      立即购买
    </span>
    <span v-if="isPay" class="footer-owned">
      已购买
    </span>
  </footer>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
import { MessageBox } from 'mint-ui';
import { Toast } from 'mint-ui';
export default {
  computed: {
    count () {
      //页面刷新后 数据会消失,解决:加判断
      if (this.$store.state.detail.count == '') {
        this.$store.commit('CHANGE_COUNT');
      }
      return this.$store.state.detail.count
    },
    productDatasView () {
      return this.$store.state.detail.productDatas.view
    },
    colSelected () {
      return this.$store.state.detail.colSelected
    },
    sizeSelected () {
      return this.$store.state.detail.sizeSelected
    }
  },

  props: {
    isPay: {
      type: Boolean,
      default: false
    },
    userId: {
      type: Number,
      default: 0
    },
    infoId: {
      type: Number,
      default: 0
    }
  },

  methods: {
    buy(){
      let payId = 0;
      let payData = {};
      this.$api({
        method: 'post',
        url: '/orderInfo/addOrder',
        data: {
          userId: this.userId,
          infoId: this.infoId,
        }
      }).then((res) => {
        payId = res.data.data
      }).then(() => {
        this.$api({
          method: 'post',
          url: '/orderInfo/unifiedOrder',
          data: {
            id: payId,
          }
        }).then((res) => {
          console.log(res.data.data)
          payData = res.data.data.expend.pay_info
        }).then(()=>{
          console.log(payData)
          WeixinJSBridge.invoke('getBrandWCPayRequest', JSON.parse(payData),
            function(res) {
              console.log(res.err_msg)
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  this.$router.push({name: '购买成功页'})
                }
            });
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
        })
      })

    },
    onBridgeReady(){

    }
  }
}
</script>

<style lang="less" scoped>
@import "../../assets/fz.less";
@import "../../assets/index/style.css";

.footer {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  height: 14vw;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  -moz-user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 0 4px 1px #0000001c;
  .bt();
  border: none;

  .footer-index,
  .footer-gocar,
  .footer-addcar {
    text-align: center;
  }

  .footer-owned{
    -webkit-flex: 6;
    -ms-flex: 6;
    flex: 6;
    text-align: center;
    line-height: 14vw;
    height: 14vw;
    color: #fff;
    background-color: #ccc;
    letter-spacing: 0.2vw;
  }

  .footer-index {
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    line-height: 14vw;
    height: 14vw;
    padding-top: 1.5vw;
    border-right-color: #f7f7f7;
    border-right-style: solid;
    .fz(border-right-width,1);

    i {
      .fz(font-size,45);
    }
    &:active {
      background-color: #f1f1f1;
    }
  }

  .footer-gocar {
    position: relative;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    height: 14vw;
    line-height: 14vw;
    padding-top: 1.6vw;
    span {
      height: 5.5vw;
      width: 5.5vw;
      line-height: 5.5vw;
      position: absolute;
      top: 0.5vw;
      right: 5.5vw;
      background-color: @cl;
      border-radius: 50%;
      color: #fff;
      .fz(font-size,24);
    }

    &:active {
      background-color: #f1f1f1;
    }
    i {
      .fz(font-size,48);
    }
  }

  .footer-addcar {
    -webkit-flex: 6;
    -ms-flex: 6;
    flex: 6;
    line-height: 14vw;
    height: 14vw;

    color: #fff;
    background-color: @cl;
    letter-spacing: 0.2vw;
    &:active {
      background-color: #ff7d00;
    }
  }
}
</style>
